<template>
  <div :style="'height:' + height">
<!--    <el-header style="border-bottom: 1px solid rgb(218 218 218); height: auto">-->
<!--      <div style="padding: 10px 0px; text-align: right;">-->
<!--        <div>-->
<!--          <el-tooltip effect="dark" content="暗模式" placement="bottom">-->
<!--            <el-button size="small" icon="Rank" @click="handleTheme('theme-dark')">暗模式</el-button>-->
<!--          </el-tooltip>-->
<!--          <el-tooltip effect="dark" content="明模式" placement="bottom">-->
<!--            <el-button size="small" icon="Rank" @click="handleTheme('theme-light')">明模式</el-button>-->
<!--          </el-tooltip>-->
<!--        </div>-->
<!--      </div>-->
<!--    </el-header>-->
    <iframe id="warmChart" :src="url"  style="width: 100%; height: 100%"/>
  </div>
</template>
<script>
import {getToken} from "@/utils/auth";

export default {
  name: "WarmChart",
  props: {
    // 组件调用时传入的流程实例ID
    insId: { type: [String, Number], default: null }
  },
  data() {
    return {
      height: document.documentElement.clientHeight - 200 + "px;",
      url: "",
    };
  },

  watch: {
    insId: {
      immediate: true, // 立即执行 handler 方法
      handler(newVal) {
        const baseUrl = `${process.env.VUE_APP_FLOW_API}/warm-flow-ui/index.html?id=${newVal}&type=FlowChart`;
        this.url = baseUrl + `&Authorization=Bearer ${getToken()}`;
        // this.url = baseUrl + `&showGrid=true&Authorization=Bearer ${getToken()}`;
      }
    }
  },

  methods: {
    handleTheme(theme) {
      // 获取目标窗口对象
      const targetWindow = document.getElementById('warmChart').contentWindow;
      targetWindow.postMessage({type: theme}, "*");
    },
  }

};
</script>
